<div class="wrapper"
     data-ng-controller="pageController as vm">
    <article>
        <header>
            <h2>{{vm.serverTitle}}</h2>
            <h1>{{vm.appTitle}}</h1>

            <!-- Buttons and Checkboxes-->
            <p class="button-bar">
                <input type="checkbox"
                       data-ng-model="vm.showCompleted" > Show completed &nbsp;&nbsp;
                <input type="checkbox"
                       data-ng-model="vm.showDeleted" > Show deleted
                <button class="btn-sync" title="Save changes and refresh with data from the server."
                        data-ng-disabled="vm.syncDisabled()"
                        data-ng-click="vm.sync()" >Sync</button>
                <button class="btn-refresh" title="Refresh with changes from the server but don't save."
                        data-ng-click="vm.refresh()" >Refresh</button>
                <button class="btn-reset"  title="Discard changes and reload from the server."
                        data-ng-click="vm.reset()">Reset</button>
            </p>
            <form class="add-item" data-ng-submit="vm.addItem()">
                <div>
                    <input class="new-item-text"
                           data-ng-model="vm.newItemText" autofocus="true" placeholder="Enter new task" />
                </div>
            </form>
        </header>

        <!-- Todo Items -->
        <!-- Uncomment next line for debugging -->
        <!-- <pre>{{vm.todos | json}}</pre> -->

        <ul class="todo-items">
            <li class="fader-animation"
                data-ng-repeat="item in vm.todos | filter:vm.itemsFilter">

                <button class="item-delete" title="delete {{item.id}}"
                        data-ng-click="vm.deleteItem(item)" >Delete</button>

                <input type="checkbox" class="item-complete"
                       data-ng-model="item.complete"/>
                <div>
                    <input class="item-text {{item.entityAspect.entityState.name}}"
                           data-ng-model="item.text"/>
                </div>
            </li>
        </ul>

        <p class="summary">
            <span data-ng-show="vm.isBusy" class="loading">Loading ...</span>
            <span data-ng-hide="vm.isBusy">
                <strong>{{vm.counts.all}} item(s)</strong>
                <span class="Added">Added: {{vm.counts.Added}}</span>
                <span class="Modified">Modified: {{vm.counts.Modified}}</span>
                <span class="Deleted">Deleted: {{vm.counts.Deleted}}</span>
            </span>
        </p>

    </article>

    <footer>
        <div>
            Learn more about
            <a href="http://www.windowsazure.com/en-us/develop/mobile/" target="_blank">Windows Azure Mobile Services</a> and
            <a href="http://www.breezejs.com/" target="_blank">Breeze</a>
        </div>
        <!-- WIP Messages -->
        <ul class="wip-messages"
            data-ng-show="vm.wipMessages.length" >

            <li data-ng-repeat="msg in vm.wipMessages">{{msg}}</li>
        </ul>

        <!-- Error Log -->
        <div class="errorlog" data-ng-show="vm.errorLog.length">
            <button data-ng-click="vm.clearErrorLog()">Clear error log</button>
            <ul>
                <li data-ng-repeat="err in vm.errorLog">{{err}}</li>
            </ul>
        </div>
    </footer>
</div>